<template>
	<view class="container">
		<top-back-navbar position="fixed" title="仓单买入" background="#7259FB" color="#fff"></top-back-navbar>
		<cxsytabbars :current="0" style="position: relative;z-index: 1;"></cxsytabbars>
		<view class="button_box">
			<image src="/static/zn/cangdanmairu_active.png" mode=""></image>
			<image src="/static/zn/cangdanmaichu.png" mode="" @click="go_cd_position2"></image>
		</view>
		<view class="" style="display: flex;justify-content: space-between;position: relative;z-index: 10;">
			<span style="color: #FFF;">趋势图></span>
			<span style="color: #FFF;" @click="chart_box_show=!chart_box_show">折叠></span>
		</view>
		<view class="chart_box" v-show="chart_box_show">

			<view style="height: 220px;width: 100vw;position: relative;z-index: 1;">
				<l-echart ref="chart" ></l-echart>
			</view>
		</view>
		<view class="cd_zong_box">
			<view class="title">
				<view class="">
					<p style="font-size:14px;">总交易量</p>
					<p class="num">{{CTC_data.zong}}</p>
				</view>
				<view class="">
					<p style="font-size:14px;">今日买入量</p>
					<p class="num">{{CTC_data.jinri_mairu}}</p>
				</view>
				<view class="">
					<p style="font-size:14px;">今日卖出量</p>
					<p class="num">{{CTC_data.jinri_maichu}}</p>
				</view>
			</view>
			<view class="bottom">
				<view class="">
					<p>仓单数量</p>
					 <p class="num">{{CTC_data.user_cd}}</p>

				</view>
				<view class="">
					<p>我的仓量</p>
					<p class="num">{{CTC_data.cangliang}}</p>
				</view>
			</view>
		</view>
		<view class="bottome_box">
			<view class="top">
				<view class="">
					<p>仓单价格:{{ nonBreakingSpace }} <span>￥{{CTC_data.now_price}}</span></p>
				</view>
				<view class="">
					<p>今日可买总量:{{ nonBreakingSpace }}<span>￥{{CTC_data.kemai}}</span></p>
				</view>
			</view>
			<view class="bottom">
				<view class="left">
					<view class="">
						<span>买入数量</span>
						<view class="uni-input-wrapper">
							<input class="uni-input" v-model="buy_num" placeholder="请输入" type="number"
								placeholder-style="color:#000;font-size:12px" @input="clearInput" />

							<uni-icons class="icon" color="#C0C4CC" type="clear" size="20" v-if="showClearIcon"
								@click='clearIcon'></uni-icons>
						</view>
					</view>
					<view class="">
						<span>仓单价格</span>
						<p>{{CTC_data.now_price}}</p>
					</view>
					<view class="">
						<span>消耗仓量</span>
						<p>{{xiaohao()}}</p>
					</view>
					<view class="button" @click="sure_buy">
					确定买入
					</view>
				</view>

				<view class="right" v-if="CTC_data.buy_list.length>0">
					<ul>
						<li>
							<view class="">
								价格
							</view>
							<view class="">
								数量
							</view>
						</li>
						<li v-for="item,index in CTC_data.buy_list">
							<view class="" :style="{ color: `${item.color}` }">
								{{item.price}}
							</view>
							<view class="">
								{{item.num}}
							</view>
						</li>
					</ul>
				</view>
				<!--  -->
				<view class="right" v-if="CTC_data.buy_list.length==0"> 
					<ul style="position: relative;">
						<li style="position: absolute;width: 80px;
									height: 80px;top:50%;left: 50%;transform: translate(-50%, -50%);">
							<image style="width: 80px;height: 80px;" src="../../static/images/home/za_not_data.png" mode=""></image>
						</li>
						<li>
							<view class="">
								
							</view>
							<view class="">
								
							</view>
						</li>
						<li v-for="item,index in 10" style="opacity: 0;">
							<view class="" >
								{{item}}
							</view>
							<view class="">
								{{item}}
							</view>
						</li>
					</ul>
				</view>
			</view>
		</view>
		<view class="table_top" >
			<view class="">
				委托买入
			</view>
			<view class="" @click="jump">
				明细>
			</view>
		</view>

		<view class=" table_box" >
			<table>
				<tr>
					<th style="width: 25%;">日期</th>
					<th style="width: 20%;">委托总数</th>
					<th style="width: 20%;">已成交数</th>
					<th style="width: 25%;">委托价格</th>
					<th style="width: 10%;">操作</th>
				</tr>
			
				<tr v-for="(item,tableData) in tableData">
					
					<td style="width: 25%;" >
						{{item.createtime}}
					</td>
					<td style="width: 20%;" >
						{{item.num}}
					</td>
					<td style="width: 20%;" >
						{{item.ynum}}
					</td>
					<td style="width: 25%;" >
						{{item.zprice}}
					</td>
					<td style="width: 10%;" >
						<p class="button" @click="cancel(item)">撤销</p>
					</td>
				</tr>
			</table>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				chart_box_show:true,
				showClearIcon: false,
				changeValue: '',
				showPassword: true,
				nonBreakingSpace: '\u00A0\u00A0\u00A0', //占位符
				option: {
					  tooltip: {
					    trigger: 'axis',
						 position: function (point, params, dom, rect, size) {
							
						           return [100, '0']  //返回x、y（横向、纵向）两个点的位置
						       },
					    formatter: function(params) {
					       const chartData = params[0]
					             return ` 当时价  ${chartData.value}`
					    }
					  },
					 
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							show: true, // 显示x轴上的标签
							formatter: function(value) {
								// 在这里可以根据需要返回自定义的提示文字
								// 例如，如果希望在每个标签后面加上"年份"，可以这样返回：
								return value;
							},
							color: '#fff'
						},
						axisLine: {
							show: true, // 关闭x轴上的轴线
							
						},
						axisTick: {
							show: true, // 关闭x轴上的刻度线
						},
						splitLine: {
							show: true
						},
						animation: true, // 启用动画效果
					},
					
					yAxis: {
						type: 'value',
						splitLine: {
							show: true
						},
						animation: true, // 启用动画效果
						min: 'dataMin',
						show: true,
						 axisLabel: { interval: 0, rotate: 0 , fontSize: 8,color: '#fff'}
					},
					series: [{
						data: [],
						type: 'line',
						animation: true, // 启用动画效果
						lineStyle: {
							color: '#FF6700'
						},
						itemStyle: {
							color: '#FF6700'
						}
					}]
				},
				openid: '',
				CTC_data: {
					now_price: 0,
					buy_list:[]
				},
				buy_num: '',
				buy_cang: 0,
				tableData: [],
			}
		},
		onLoad(e) {

			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					_this.openid = id
					_this.get_cangdan_mairu()
				},
				fail: function(err) {
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			
		},
		mounted() {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(this.option);

			});

		},

		computed: {

		},
		methods: {
			go_cd_position2(){
				
				uni.navigateTo({
					url: '/pagesZA/position/cd_position2'
				});
			},
			clearInput: function(event) {
				let inputValue = event.target.value;

				// 使用正则表达式过滤非数字字符
				inputValue = inputValue.replace(/[^0-9]/g, '');

				// 更新输入框的值
				this.buy_num = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() {
				this.buy_num = '';
				this.showClearIcon = false;
			},

			get_openid(id) {
				
			},
			get_cangdan_mairu() {
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cangdan_mairu_zong&app=1&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						if (code == 1) {
							uni.showToast({
								icon:'none',
								title:data.message,
								success() {
									setTimeout(()=>{
										// uni.navigateTo({
										// 	url: '/pagesZA/home/home'
										// });
										uni.navigateBack()
									},1500)
								}
							})
						}
						console.log(data);
						this.echarts_dta(data.k_line_data)
						this.CTC_data = data
						this.tableData = data.buy
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			echarts_dta(value) {
				var a = function(value, type) {
					var arr = [];
					for (var i = 0; i < value.length; i++) {
						if (type == 'time') {
							
							// 获取小时
							var hours = new Date(value[i][type] * 1000).getHours();
							
							// 获取分钟
							var minutes = new Date(value[i][type] * 1000).getMinutes();
							
							// var tp = new Date(value[i][type] * 1000).getDate()
							// var month = new Date(value[i][type] * 1000).getMonth() + 1;
							var str=`${hours}:${minutes}`
							
							arr.push(str);
						} else {
							arr.push(value[i][type])
						}

					}

					return arr;
				};
				var time_arr = a(value, 'time')
				var price_arr = a(value, 'price')
			
				time_arr.push('')
				time_arr.push('')
			
				this.option.xAxis.data = time_arr
				this.option.series[0].data = price_arr
				// this.$refs.chart.resize({width: '190%', height: 205})
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
				});
			},
			xiaohao() {
				var num = this.buy_num

				if (num != '' && !isNaN(num)) {
					this.buy_cang = num * this.CTC_data.now_price
					return (`${num*this.CTC_data.now_price}`)

				} else {
					this.buy_num = ''
					this.buy_cang = 0
					return '0.00000'
				}
			},
			sure_buy() {
				
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '确认买入吗？',
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#628EFE',
					confirmColor: "#628EFE",
					success(res) {
						if(res.confirm){
							 _this.sure_buys()
						}
				
					}
				})
			},
			sure_buys(){
				var openid = this.openid
				var num = this.buy_num
				var price=this.CTC_data.now_price
				var _this= this
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cangdan_buy_zong&app=1&openid=' +
						openid+'&num='+num+'&price='+price,
				
					success: res => {
						var data = res.data
						var code = data.error
						if(code == 0){
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position:'center',
								success(){
									_this.get_cangdan_mairu()
								}
							})
						}else if(code != 0){
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position:'center',
							})
						}
					
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
				
			},
			jump() {
				uni.showModal({
					title: '提示',
					content: '即将开放',
					showCancel: false,
					confirmColor: "#DD524D",
					success() {
						return
					}
				})
			},
			cancel(value) {
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '确认撤销吗？',
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#628EFE',
					confirmColor: "#628EFE",
					success(res) {
						if(res.confirm){
						_this.sure_cancel(value)
						}

					}
				})
			},
			sure_cancel(value) {
				console.log(value);

				var openid = this.openid
				var id = value.id
				var _this=this
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.cangdan_buy_no_zong&app=1&openid=' +
						openid + '&id=' + id,

					success: res => {
						var code = res.data.error
						console.log(code);
						if (code == 0) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500,
								position:'center',
								success(){
									_this.get_cangdan_mairu()
								}
							})
						}
						else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 1500,
								position:'center',
							})
						}
						


					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		},
	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	page {
		height: 100%;
		
	}

	.container {

		height: 100vh;
		background-color: #7259FB;
		// background-size: 150% 106%;
		position: relative;
		padding: 15px 2px 104px;
		overflow: auto;
	}

	.button_box {
		width: 100%;
		display: flex;
		justify-content: space-between;

		image {
			width: 50%;
			height: 74px;
		}
	}

	.chart_box {
		position: relative;
		top: -75rpx;
		width: 100%;
		height: 156px;
		padding-left: 10rpx;
		// border: 1px solid red;
		// overflow: hidden;
	}

	.cd_zong_box {
		
		width: 90%;
		// height: 185px;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;
		color: #000;
		margin:  0 auto;
		border-radius: 5px;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.num{
				color: #A0A0A0;
				font-size: 20px;
			}
			view {
				width: 100%;
				text-align: center;
				
				p {
					font-size: 17px;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				width: 100%;
				text-align: center;

				p {
					font-size: 13px;
				}
				.num{
					color: #A0A0A0;
					font-size: 20px;
				}

				span {
					font-size: 17px;
				}
			}
		}
	}

	.bottome_box {
		margin-top: 5px;
		padding: 0 10px;
		width: 100%;
		color: #fff;

		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				width: 100%;

				p {
					font-size: 13px
				}
			}
		}

		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				width: 100%;
			}

			.left {
				position: relative;
				left: -5px;
				margin-top: 5px;

				view {
					height: 40px;
					padding: 10px;
					box-sizing: border-box;
					color: #000;
					margin-bottom: -11px;
					// background: url('/static/images/home/za_input_bg.png') 0 0 no-repeat;
					border-radius: 5px;
					background-color: #fff;
					margin: 20rpx 0;
					background-size: 100%;
					font-size: 12px;

					span {
						display: block;
						width: 35%;
						padding: 0 5px;
						line-height: 40px;
						font-size: 12px;
					}

					p {
						width: 65%;
						text-align: center;
						overflow: hidden;
					}

					display: flex;
					justify-content: space-between;
					align-items: center;

					.uni-input {
						width: 100%;
						background-color: transparent;
						color: #000;
						text-align: center;
						height: 36px;

					}

					.uni-input-wrapper {
						position: relative;
						width: 65%;
						margin: 0;
						background: none;
						padding: 0;
						
					}

					.icon {
						position: absolute;
						top: 8px;
						bottom: 0;
						right: 0;
						margin: auto;

					}
				}

				.button {
					background: #C49E68;
					background-size: 100%;
					color: #fff;
					font-size: 18px;
					justify-content: center;
				}
			}

			.right {
				margin-top: 5px;

				ul {
					list-style: none;
					height: 190px;
					overflow: auto;
				}

				li {
					height: 12px;
					line-height: 12px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;

					view {
						font-size: 14px;
						text-align: center;
					}

				}

			}

		}
	}


	.table_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: #fff;
		padding: 0 11px;

		view {
			font-size: 12px;
		}
	}

	.uni-container {
		width: 100%;

		.button {
			background-color: #1E4983;
			color: #fff;
			border-radius: 5px;
		}

	}

	.table_box {
		color: #000;
		width: 100%;
		// padding: 0 10px 0;
		margin-top: 10px;
		table {
			width: 100%;
			background-color: #fff;
			border-collapse: collapse;
			border-radius: 5px;

			td,
			th {
				white-space: nowrap;
				text-align: center;
				display: inline-block;
				font-size: 10px;
			}
			td{
				overflow: hidden;
				font-size: 10px;
			}

			tr{
				display: flex;
				width: 100%;
				margin-bottom: 3px;
				font-size: 10px;
			}
		}
		
		.button{
			background-color: #7F69EB;
			border-radius: 5px;
			color: #fff;
		}
	}
</style>